<template>
  <div
    v-loading="loading"
    class="shopclass"
    element-loading-text="正在加载..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.3)"
    :element-loading-body="true"
    element-loading-customClass="mask"
  >
    <ShopclassBanner />
    <div class="bigbox">
      <Shopclassify
        @getList="seletedClassify"
        @seletedType="seletedType"
      />
      <div class="cate">
        <div
          style="width: 100%"
          class="ShopClassList"
        >
          <div
            v-for="shops in GoodsData"
            :key="shops.index"
            class="good-list-box"
          >
            <div
              class="goods-list-itme shop-box"
              :style="{
                backgroundImage: 'url(' + shops.mid_images + ')',
                backgroundPosition: 'center center',
                backgroundRepeat: 'no-repeat',
                backgroundPositionX: '100%',
              }"
              @click="GtShop(shops.detail)"
            >
              <div class="top-box">
                <div class="logo">
                  <img
                    :src="shops.detail.cLogoUrl"
                    :alt="shops.detail.cShopShowName"
                    class="logo-img"
                  >
                </div>
                <div class="shop-name">
                  {{ shops.detail.cShopShowName }}
                </div>
                <div class="shop-type">
                  {{ shops.detail.iType === 1 ? "自营" : "非自营" }}
                </div>
                <div class="shop-status">
                  {{ shops.watchNum }}人已关注
                </div>
              </div>
              <div class="triangle" />
              <div class="goods-footer">
                <div class="goods-footer-item">
                  <i class="el-icon-goods" />
                  <span>数量{{ totalCount }}件</span>
                </div>
                <div class="goods-footer-item">
                  <i class="el-icon-document-checked" />
                  <span>成交20笔</span>
                </div>
                <div class="goods-footer-item">
                  <i class="iconfont el-icon-haoping" />
                  <span>好评100%</span>
                </div>
              </div>
            </div>
            <div
              v-for="(item, index) in shops.goods.data.slice(0, 3)"
              :key="index"
              class="goods-list-itme goods-itme"
            >
              <div
                class="goods-box"
                @click="GotoShopShow(item)"
              >
                <img
                  :src="item.defaultAlbum"
                  :alt="item.cProductShowName"
                  class="goods-img"
                >

                <p class="name">
                  {{ item.cProductShowName }}
                </p>
                <p class="price">
                  ￥ {{ item.fSalePrice }}
                </p>
              </div>
            </div>
          </div>
          <div
            v-if="LastPage > page"
            class="more"
            @click="getMore"
          >
            点击加载更多+
          </div>
          <div
            v-else
            class="more"
          >
            没有更多
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ShopclassBanner from "../components/shopclass/ShopclassBanner.vue";
import Shopclassify from "../components/shopclass/ShopClassify";
import base from "../api/base"; // 导入接口域名列表
export default {
  name: "Shopclass",
  components: {
    ShopclassBanner,
    Shopclassify,
  },
  data() {
    return {
      GoodsData: [],
      LastPage: 0,
      type_id: "",
      page: 1,
      loading: true,
      totalCount: "",
      URL: "",
    };
  },
  mounted() {
    this.getData(this.type_id, 1, 7);
    console.log("this.base", base.sqq);
    this.URL = base.sqq;
  },
  methods: {
    seletedClassify(type_id) {
      console.log("seletedClassify", type_id);
      this.type_id = type_id;
      this.getData(type_id, 1, 7);
    },
    // 排序
    seletedType(type) {
      console.log("seletedType", type);
    },
    // 关注人数
    GetShopFavoritesData(iShopId) {
      let params = {
        token: localStorage.getItem("token"),
        id: iShopId,
      };
      this.$api.commit.getFavoriteCount(params).then((res) => {
        console.log("关注人数res", res);
        if (res.code === 200) {
          // console.log('this.关注人数', res.data.pager.totalCount)
          this.totalCount = res.data;
          this.GoodsData.forEach((item) => {
            if (iShopId == item.shop_id) {
              this.$set(item, "watchNum", res.data);
            }
          });
        }
      });
    },
    getData(type_id, page, limit) {
      let params = {
        type_id: type_id,
        page: page,
        limit: limit,
      };
      this.$api.home.ShopsList(params).then((res) => {
        if (res.code == 1) {
          this.GoodsData = res.data.data;
          this.LastPage = res.data.last_page;
          this.loading = false;
          this.GoodsData.forEach((elemet) => {
            this.GetShopFavoritesData(elemet.shop_id);
          });
          // let Shopid = "";
          // res.data.data.forEach((element) => {
          //   Shopid = element.shop_id;
          // });
          // let params = {
          //   queryCondition: {
          //     order: [
          //       {
          //         fieldname: "iOrder",
          //         direction: "asc",
          //       },
          //     ],
          //     pageindex: 1,
          //     pagesize: 1,
          //     where: [
          //       {
          //         fieldname: "categoryid",
          //         valuefrom: Shopid,
          //       },
          //     ],
          //   },
          // };
          // this.$api.commit.GetProductList(params).then((res) => {
          //   if (res.code === 200) {
          //     console.log("店铺所属商品总数统计查询接口", res.data.totalCount);
          //     this.totalCount = res.data.totalCount;
          //   }
          // });
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    // 店铺所属商品总数统计查询接口 /client/Products/getProductList
    GetProductListData(Shopid) {
      let params = {
        queryCondition: {
          order: [
            {
              fieldname: "iOrder",
              direction: "asc",
            },
          ],
          pageindex: 1,
          pagesize: 1,
          where: [
            {
              fieldname: "categoryid",
              valuefrom: Shopid,
            },
          ],
        },
      };
      this.$api.commit.GetProductList(params).then((res) => {
        if (res.code === 200) {
          console.log("店铺所属商品总数统计查询接口", res.data.totalCount);
          return res.data.totalCount;
        }
      });
    },
    getMore() {
      this.page++;
      this.getData(this.type_id, this.page, 1);
    },
    //跳转商品详情
    goDetail(item) {
      this.$router.push({
        path: "/fruit/detail",
        query: {
          id: item.pid,
          iShopId: item.iShopId
        },
      });
    },
    // 店铺详情
    GtShop(GtShop) {
      console.log("GtShop", GtShop.id);
      sessionStorage.setItem("ShopID", GtShop.id)
      this.$router.push({
        path: "/shopindex?id=" + GtShop.id + "&refresh=true",
      });
      
    },
    // 商品详情
    GotoShopShow(GotoShopShow) {
      console.log("商品详情", GotoShopShow);
      this.$router.push({
        path: "/fruit/detail",
        query: {
          id: GotoShopShow.pid,
          iShopId: GotoShopShow.iShopId
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.shopclass {
  .banner {
    height: 700px;
    overflow: hidden;
    position: relative;
  }
  .bigbox {
    display: block;
    padding: 2.19rem 0;
    position: relative;
    z-index: 9;
    bottom: 10rem;
    margin-bottom: -10rem;
    .ShopClassify {
      position: static;
      bottom: 20rem;
      left: 0rem;
      z-index: 100;
      width: 70%;
    }
    .ShopClassList {
      position: static;
      bottom: 18rem;
      left: 0rem;
      z-index: 100;
      width: 70%;
    }
  }
}
.cate {
  padding: 0 16.19rem;
  display: flex;
  // justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
}

.good-list-box {
  margin-bottom: 1.88rem;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  // justify-content: space-between;
  background: white;
  align-items: center;

  .goods-list-itme {
    // width: 19rem;
    height: 25rem;
    display: flex;
    background: white;
    align-items: center;
    justify-content: center;
    .goods-box {
      background: white;
    }
    .goods-img {
      width: 15rem;
      height: 15rem;
      margin: 0 auto;
      text-align: center;
    }
    .name {
      font-size: 1.13rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #040000;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 15rem;
      margin-top: 0.94rem;
      text-align: center;
    }
    .price {
      font-size: 1.5rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3406f;
      margin-top: 0.94rem;
      width: 15rem;
      text-align: center;
    }
  }
  .goods-itme {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    cursor: pointer; //鼠标变小手
  }
  .shop-box {
    background: #00dea9;
    flex-direction: column;
    color: white;
    font-weight: 400;
    overflow: hidden;
    cursor: pointer; //鼠标变小手
    .top-box {
      text-align: center;
      margin: 0 auto;
      height: 20rem;
      padding-top: 2rem;
      .logo-img {
        background: white;
        width: 7rem;
        height: 7rem;
        border-radius: 100%;
        text-align: center;
        line-height: 7rem;
      }
      .shop-name {
        font-size: 1.5rem;
        padding: 1rem 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 16.5rem;
        text-align: center;
      }
      .shop-type {
        font-size: 0.8rem;
        line-height: 1.5rem;
        border-top: white 0.1rem solid;
        border-bottom: white 0.1rem solid;
        width: 4rem;
        text-align: center;
        margin: 0 auto;
      }
      .shop-status {
        font-size: 1rem;
        line-height: 2.8rem;
      }
    }
    .triangle {
      width: 0;
      height: 0;
      border-bottom: 1rem solid#00dea9;
      border-right: 17rem solid transparent;
      display: flex;
      flex-direction: column;
    }
    .goods-footer {
      width: 100%;
      display: flex;
      background: #00dea9;
      justify-content: space-between;
      padding-bottom: 0.6rem;
      .goods-footer-item {
        margin: 0.2rem;
        // width: 6rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        i {
          line-height: 3rem;
          font-size: 1.6rem;
        }
        span {
          font-size: 0.6rem;
        }
      }
    }
  }
}
.more {
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 1.95rem;
  text-align: center;
  margin: 3.13rem auto;
  cursor: pointer;
}
</style>
